<html>
<head>
  <title>AngularJS Custom Directives</title>
</head>
<body>
  <h1>Sample Application</h1>
  <div ng-app="mainApp" ng-controller="StudentController">
    <student name="Mahesh"></student><br/>
    <student name="Piyush"></student>
  </div>
  <script src="js/angular.min.js"></script>
  <script>
  var mainApp = angular.module('mainApp', []);
  
  mainApp.directive('student', function(){
    return {
      restrict: 'E',
      template: 'Student: <b>{{ student.name }}</b>, Roll No: <b>{{ student.rollno }}</b>',
      scope: {
        student: '=name'
      },
      compile: function(element, attributes){
        element.css('border', '1px solid #ccc');
        return function($scope, element, attributes){
          element.html('Student: <b>'+$scope.student.name+'</b>, Roll No: <b>'+$scope.student.rollno+'</b><br/>');
          element.css('background-color', '#f0f');
        };
      }
    }
  });
  
  mainApp.controller('StudentController', function($scope){
    $scope.Mahesh = {
      name: 'Mahesh Parashar',
      rollno: 1
    };
    
    $scope.Piyush = {
      name: 'Piyush Parashar',
      rollno: 2
    }
  });
  
  
  </script>
</body>
</html>